<!--  单个input  -->
<template>
  <el-input
    v-model="inputVal"
    v-bind="$attrs"
    :style="{ width: inputWidth + 'px' }"
    :placeholder="inputPlaceholder"
    :maxlength="maxlength"
    :show-word-limit="showWordLimit"
    :disabled="inputDisabled"
    :type="inputType"
    @input="input"
    @change="inputChange"
  ></el-input>
</template>

<script setup>
import { ref, toRef, watch } from 'vue'

const emits = defineEmits(['update:inputValue', 'input', 'inputChange'])
const props = defineProps({
  // 输入框默认文字
  inputPlaceholder: {
    type: String,
    default: '请输入'
  },
  // form表单的prop值，根据它更新form里对应prop的input值
  propName: {
    type: String,
    default: ''
  },
  // input的双向绑定值
  inputValue: {
    type: [String, Number, null],
    default: ''
  },
  // input类型
  inputType: {
    type: String,
    default: 'text'
  },
  // input框的长度
  inputWidth: {
    type: [String, Number],
    default: 500
  },
  // 最大可输入长度
  maxlength: {
    type: Number,
    default: 30
  },
  // 是否显示输入字数统计--设置位true时需要设置文字最大长度maxlength
  showWordLimit: {
    type: Boolean,
    default: false
  },
  // 是否禁用输入框
  inputDisabled: {
    type: Boolean,
    default: false
  }
})

const inputVal = ref('') // 方法一
// const { inputValue: inputVal } = toRef(props)

// 监控父组件input的输入值，更新给自身
watch(
  () => props.inputValue,
  val => {
    inputVal.value = val // 方法一
    emits('update:inputValue', val)
  },
  { deep: true }
)

/**
 * @description 输入时即时更新input的值
 * @param {String} val 更新后的值
 */
function input(val) {
  // console.log(val, 'inputVal')
  emits('input', val)
}

/**
 * @description input框失焦后更新input的值
 * @param {String} val 更新后的值
 */
const inputChange = val => {
  // console.log(val, 'inputChangeVal')
  emits('inputChange', { propName: props.propName, value: val })
}
</script>

<style lang="scss" scoped></style>
